<template>
  <div id="app">
    <div
      style="width: 400px; height: 400px"
      class="echarts"
      ref="mycolumnar"
    ></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "HelloColumnar",

  data() {
    return {};
  },

  mounted() {
    var myChart = echarts.init(this.$refs.mycolumnar);
    myChart.setOption({
      tooltip: {
        //提示框组件
        trigger: "axis",
        formatter: "{b}<br />{a0}: {c0}<br />{a1}: {c1}",
        axisPointer: {
          type: "shadow",
          label: {
            backgroundColor: "#6a7985",
          },
        },
        textStyle: {
          color: "#fff",
          fontStyle: "normal",
          fontFamily: "微软雅黑",
          fontSize: 12,
        },
      },
      grid: {
        left: "10%",
        right: "10%",
        bottom: "10%",
        top: "49%",
        //	padding:'0 0 10 0',
        containLabel: true,
      },
     
      xAxis: [
        {
          type: "category",
          //	boundaryGap: true,//坐标轴两边留白
          data: [
            "5G终端聚焦",
            "5G高倒流",
            "5G终端聚焦区",
            "口碑场景保障",
            " 其他",
          
          ],
          axisLabel: {
            //坐标轴刻度标签的相关设置。
            //		interval: 0,//设置为 1，表示『隔一个标签显示一个标签』
            //	margin:15,
            textStyle: {
              color: "#078ceb",
              fontStyle: "normal",
              fontFamily: "微软雅黑",
              fontSize: 12,
            },
            rotate: 50,
          },
          axisTick: {
            //坐标轴刻度相关设置。
            show: false,
          },
          axisLine: {
            //坐标轴轴线相关设置
            lineStyle: {
              color: "#fff",
              opacity: 0.2,
            },
          },
          splitLine: {
            //坐标轴在 grid 区域中的分隔线。
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: "value",
          splitNumber: 5,
          axisLabel: {
            textStyle: {
              color: "#a8aab0",
              fontStyle: "normal",
              fontFamily: "微软雅黑",
              fontSize: 12,
            },
          },
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: ["#fff"],
              opacity: 0.06,
            },
          },
        },
      ],
      series: [
        {
          name: "健康度",
          type: "bar",
          data: [
            10, 15, 30, 45, 55, 60, 62, 80, 80, 62, 60, 55, 45, 30, 15, 10,
          ],
          barWidth: 10,
          barGap: 0, //柱间距离
          // label: {//图形上的文本标签
          //     normal: {
          //       show: true,
          //       position: 'top',
          //       textStyle: {
          //           color: '#a8aab0',
          //           fontStyle: 'normal',
          //           fontFamily: '微软雅黑',
          //           fontSize: 12,
          //       },
          //     },
          // },
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#5768EF",
                },
                {
                  offset: 1,
                  color: "#5768EF",
                },
              ]),
              barBorderRadius: 50,
              borderWidth: 0,
            },
          },
        },
        {
          name: "可用度",
          type: "bar",
          data: [8, 5, 25, 30, 35, 55, 62, 78, 65, 55, 60, 45, 42, 15, 12, 5],
          barWidth: 10,
          barGap: 0, //柱间距离
          // label: {//图形上的文本标签
          //     normal: {
          //       show: true,
          //       position: 'top',
          //       textStyle: {
          //           color: '#a8aab0',
          //           fontStyle: 'normal',
          //           fontFamily: '微软雅黑',
          //           fontSize: 12,
          //       },
          //     },
          // },
          itemStyle: {
            normal: {
              show: true,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "#69CBF2",
                },
                {
                  offset: 1,
                  color: "#69CBF2",
                },
              ]),
              barBorderRadius: 50,
              borderWidth: 0,
            },
          },
        },
      ],
    });
  },

  methods: {},
};
</script>

<style lang="less" scoped>

</style>